<!--  -->
<template>
  <el-form
    size="small"
    ref="borrForm"
    :model="borrForm"
    class="demo-form-inline"
    label-width="150px"
  >
    <tempalte v-if="btnType == '借阅'">
      <el-form-item label="借阅人">
        <el-input v-model="borrForm.borrowers"></el-input>
      </el-form-item>
      <el-form-item label="借阅人身份证号">
        <el-input v-model="borrForm.idCard"></el-input>
      </el-form-item>
      <el-form-item label="借阅人联系方式">
        <el-input v-model="borrForm.contactInformation"></el-input>
      </el-form-item>
      <el-form-item label="借阅事由">
        <el-input type="textarea" v-model="borrForm.reason"></el-input>
      </el-form-item>
      <el-form-item label="借阅类型">
        <el-select v-model="borrForm.type" placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="借阅凭证">
        <IndexCard :limit="100" @handleUploadImage="handleUploadImage" />
      </el-form-item>
    </tempalte>
    <template v-else>
      <el-form-item label="归还人">
        <el-input v-model="borrForm.borrowers"></el-input>
      </el-form-item>
      <el-form-item label="归还人身份证号">
        <el-input v-model="borrForm.idCard"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="borrForm.reason"></el-input>
      </el-form-item>
      <el-form-item label="归还现场照片">
        <IndexCard :limit="100" @handleUploadImage="handleUploadImage" />
      </el-form-item>
    </template>
    <el-form-item>
      <el-button @click="goback">返回</el-button>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { borrowAdd } from "@/api/files/basics";
import { dictBorrowType } from "@/api/index";
import IndexCard from "@/components/ImageUpload/indexCard.vue";
export default {
  props: ["arcPersonnelId", "btnType"],
  components: {
    IndexCard,
  },
  data() {
    return {
      borrForm: {
        classification: "借阅",
        borrowers: "",
        idCard: "",
        contactInformation: "",
        reason: "",
        type: "",
        borrowEvidenceList: [],
      },
      typeOptions: [],
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    getBorrowType() {
      let params = {};
      dictBorrowType(params).then((res) => {
        if (res.code == 200) {
          this.typeOptions = res.data;
        }
      });
    },
    onSubmit() {
      this.borrForm.classification = this.btnType;
      let data = { arcPersonnelId: this.arcPersonnelId, ...this.borrForm };
      borrowAdd(data).then((res) => {
        if (res.code == 200) {
          let msg = this.btnType + "成功";
          this.$message.success(msg);
          this.goback();
        } else {
          let msg = this.btnType + "失败";
          this.$message.warning(msg);
        }
      });
    },
    handleUploadImage(fileList) {
      let imageList = JSON.parse(
        JSON.stringify(this.borrForm.borrowEvidenceList)
      );
      let imageListMerge = fileList.concat(imageList);
      this.borrForm.borrowEvidenceList = JSON.parse(
        JSON.stringify(imageListMerge)
      );
    },
    goback() {
      this.borrForm = {
        classification: "借阅",
        borrowers: "",
        idCard: "",
        contactInformation: "",
        reason: "",
        type: "",
        borrowEvidenceList: [],
      };
      this.$emit("closeBorrower");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getBorrowType();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>